<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>评价晒单</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="/h5/css/style.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">


    <link rel="stylesheet" type="text/css" href="/static/api/css/style.css" />
<!--    <script src="/static/api/js/flexible.js" type="text/javascript" charset="utf-8"></script>-->
    <script src="/static/api/js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/plugs/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script src="/static/plugs/layui-v2.5.6/layui.js"></script>

</head>

<body>

<!--返回-->
<div class="top">
    <!--    <i></i>-->
    斯匹克英语评价系统
</div>
<form class="c-form">
    <div class="form-box">
<!--        班级、姓名-->
        <div >
            <span style="padding:.25rem 0.5rem 0.3rem 0.35rem;font-size:13px">学生班级：<input name="class_name" value="" placeholder="请输入班级名称"></span>
            <br/>
            <span style="padding:.100rem 0.5rem 0.3rem 0.35rem;font-size:13px">学生姓名：<input name="student_name" value="" placeholder="请输入学生名字"></span>
        </div>

        <!--具体说说看-->
        <div class="jtssk">
<!--            <p class="title"><span>-</span>具体说说看<span>-</span></p>-->
            <div class="items">
                <input type="hidden" value="" name="users_id">
                <input type="hidden" value="" name="qr_id"  >
                <input type="hidden" value="" name="qr_user_id"  >
                <input type="hidden" value="" name="scores"  >
                <input type="hidden" value="" name="star_names"  >
                <input type="hidden" value="" name="images"  >
                <input type="hidden" value="" name="videos"  >
            </div>
        </div>
        <!--评价内容    -->
        <div class="remark content12" >
            <textarea name="content" placeholder="说点什么吧..." class="c-textarea"></textarea>
        </div>
        <!--照片/视频   -->
        <div class="aui-item-box images" >
            <div class="aui-layout upload-wrap">
                <div id="upload-inner">

                </div>
                <a href="javascript:;" class="aui-palace-grid"
                   data-ydui-actionsheet="{target:'#actionSheet',closeElement:'#cancel'}">
                    <div class="aui-palace-grid-icon">
                        <img src="/h5/images/camera.png">
                    </div>
                    <div class="aui-palace-grid-text">
                        <h2>照片/视频</h2>
                    </div>
                </a>
            </div>
            <div id="in-box" style="display:none"></div>
            <div id="fileList">
                <input type="file" accept="image/png,image/gif,image/jpeg" capture="camera" id="fileInput"
                       class="file-input">
            </div>
        </div>
        <div class="remark isanonymous" >
            <label class="cell-item">
                <label class="cell-right">
                    <input type="radio" value="2" name="isanonymous"  >
                    <i class="cell-checkbox-icon"></i>
                </label>
                <span class="cell-left">匿名评价</span>
            </label>
        </div>
        <div class="submit">
            <button id="submit" lay-submit lay-filter="sub">提交</button>
        </div>
        <!--    <div class="layui-form-item">-->
        <!--        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="sub">登录</button>-->
        <!--    </div>-->

</form>


    <div class="m-actionsheet" id="actionSheet">
        <div class="aui-show-box">
            <div class="aui-show-image">
                <a href="javascript:;" class="aui-action-item b-line" style="color:#f0250f"
                    onclick="uploadFile('video')" id="my-vedios">录视频</a>
                <a href="javascript:;" class="aui-action-item b-line" onclick="uploadFile('img')">拍照片</a>
            </div>
            <a href="javascript:;" id="cancel" class="aui-action-item">取消</a>
        </div>
    </div>
    <!-- loading  -->
    <div class="modal" id="loadingModal" data-bs-backdrop="static" data-bs-keyboard="false" aria-hidden="true"
        tabindex="-1">
        <div class="modal-dialog modal-dialog-centered" style="justify-content: center;">
            <div class="modal-content" style="padding: 20px 0;width: 90px;height: 90px;">
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">

                    </div>
                    <div>加载中...</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 预览 -->
    <div id="previewModal" class="modal fade">
        <div class="modal-dialog preview-dialog" role="document">
            <div class="modal-content">
                <!-- <div class="modal-header"></div> -->
                <div class="modal-body" id="previewInfo">
                    <!-- <img src="/images/camera.png" class="preview-img"> -->
                </div>
                <div class="modal-footer preview-modal-footer">
                    <span onclick="closePreview()">x</span>
                </div>
            </div>
        </div>
    </div>




</body>

</html>
<script src="/h5/js/bootstrap.js"></script>
<script type="text/javascript" src="/h5/js/jquery.min.js"></script>
<script type="text/javascript" src="/h5/js/stars.js"></script>
<script type="text/javascript" src="/h5/js/layer.js"></script>
<script>
    var qr_id = GetQueryString('qr_id');
    var template_id = GetQueryString('template_id');
    var users_id = GetQueryString('users_id');
    var qr_user_id = GetQueryString('qr_user_id');
    $("[name='template_id']").val(qr_id);
    $("[name='users_id']").val(users_id);
    $("[name='qr_user_id']").val(qr_user_id);
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    //获取模板详情

    $(function() {


            $.ajax({
                url: "/api/evaluation.elist/getStudentInfo?users_id="+users_id + "&qr_id="+qr_id+"&qr_user_id="+qr_user_id,
                type: "get",
                dataType: "json",
                success: function (data) {
                    console.log(data.code)
                    $("[name='class_name']").val(data.data.class_name);//班级
                    $("[name='student_name']").val(data.data.student_name);//学生姓名
                }
            })

        //使用ajax发送请求
        $.ajax({
            url:"/api/evaluation.template/getInfo?id="+template_id,
            type:"get",
            dataType:"json",
            success:function(data){
                // console.log(data.data.fields);return false;
                // var array = ["评价内容", "发图/视屏", "是否匿名"];


                $("[name='star_names']").val(data.data.star_names);//五星);
                // if($.inArray("评价内容", data.data.fields) >=0){
                //     $(".content12").css('display','block'); //
                // }else{
                //     $(".content12").css('display','none'); //
                // }
                // if($.inArray("发图/视屏", data.data.fields) >= 0){
                //     $(".images").css('display','block'); //
                // }else{
                //     $(".images").css('display','none'); //
                // }
                // if($.inArray("是否匿名", data.data.fields) >= 0){

                //     $(".isanonymous").css('display','block'); //
                // }else{
                //     $(".isanonymous").css('display','none'); //
                // }
                $.each(data.data.fields, function(index, value) {
                    console.log(index,value);
                    var star_name = value.star_name;

                    var htm = "";
                    htm += "    <div class='item'>";
                    htm += "    <span>"+star_name+"</span>";
                    htm += "    <div class='star' name="+star_name+" val="+index+">";
                    htm += "    <span class='off' name="+star_name+" val="+index+"></span>";
                    htm += "    <span class='off' name="+star_name+" val="+index+"></span>";
                    htm += "    <span class='off' name="+star_name+" val="+index+"></span>";
                    htm += "    <span class='off' name="+star_name+" val="+index+"></span>";
                    htm += "    <span name="+star_name+" val="+index+"></span>";
                    htm += "    </div>";
                    htm += "</div>";

                    $('.items').append(htm);
                })
                // console.log(data.data.star_names);return false;


                // layui.use([ 'element', 'jquery', 'laydate', 'form'],function() {
                //
                //     layer.msg(3213);
                // })
            }
        });



    });

</script>
<script type="text/javascript">

    $('.aui-item-box').click(function () {

        $(".upload-item img").each(function() {

            if($(this).attr('data-type') == 'video'){

                // vie_str = $(this).attr("data-src");
                $("#my-vedios").css('display','none'); //
            }
        });

    });
    // var services  = {:json_encode($row.fields)};//标签
    // $("[name='star_names']").val(services);//五星);
    // $('.star span').click(function () {

        $(".items").on('click','.star span',function () {
        var arr = [];
        var val = $("[name='scores']").val();
        if(val){
            arr = val.split(',');
        }

        $(this).parent().find('span').removeClass('on');
        var index = $(this).index();
        // alert($(this).attr('name'));return false;
        var zb_name = $(this).attr('name');
        var zb_val = $(this).attr('val');
        arr[zb_val] = $(this).index() + 1;
        $(this).parent().find('span').each(function () {
            if (index < 0) {
                return;
            }
            $(this).addClass('on');
            index--;
        });

        console.log(arr);//return false;
        console.log(JSON.stringify(arr))//JSON.stringify(arr)
        // var jsonText= JSON.stringify (str);// 把一个对象转换成 json 字符串
        //
        // str=JSON.parse (jsonText);// 把一个 json 字符串解析成对象
        // console.log(star_name);return false;
        // $("[name='scores']").val(arr);
        $("[name='scores']").val( arr);
    });

    // $('.tags ul li').click(function () {
    //     $(this).toggleClass('on')
    // });
    // $('#submit').click(function () {
    layui.use([ 'element', 'jquery', 'laydate', 'form'],function() {
        var $ = layui.jquery;
        var element = layui.element;
        var laydate = layui.laydate;
        var form = layui.form;

        //监听提交事件
        form.on('submit(sub)', function(data){
            var fields=$(data.form).serializeArray();// serialize
            var img_arr = new Array();
            var vie_str = '';
            $(".upload-item img").each(function() {
                if($(this).attr('data-type') == 'img'){
                    img_arr.push($(this).attr("data-src"));
                }
                if($(this).attr('data-type') == 'video'){

                    vie_str = $(this).attr("data-src");

                }
            });
            var img_str = img_arr.join('|');
            $.each(fields,function(i,v){
               if(v.name =='images'){
                    v.value = img_str;
               }
                if(v.name =='videos'){
                    v.value = vie_str;
                }
            });

            // console.log(fields);
            //获取请求数据
            // var oldPwd = data.field.oldPwd;
            // var newPwd = data.field.newPwd;
            // var confirmPwd = data.field.confirmPwd;

            //使用ajax发送请求
            $.ajax({
                url:"/api/evaluation.elist/addEvaluate",
                type:"post",
                data:fields,
                dataType:"json",
                success:function(data){

                    layer.msg(data.msg);
                    //window.location = './myinfo.html' ?template_id=' . $template_id .'&users_id=' . $users_id. '&qr_user_id=' . $qr_user_id;
                    if(data.code == 1){
                        WeixinJSBridge.call('closeWindow');
                        // window.location.replace('./myinfo.html?template_id=' + template_id+'&users_id=' + users_id+'&qr_user_id='+qr_user_id)
                    }

                },
                error:function(data){
                    //alert(22)
                    layer.msg(data.msg);
                }
            });
            return false;  //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
    //
    // });
</script>
<!-- 先执行html 再执行layer.js -->
<script type="text/javascript">

    const loadingModal = new bootstrap.Modal(document.getElementById("loadingModal"), {
        backdrop: "static",
        keyboard: false,
    });
    const previewModal = new bootstrap.Modal(document.getElementById("previewModal"), {
        backdrop: "static",
        keyboard: false,
    });
    function previewUploadInfo(e) {
        console.log('e', e)
        if (e) {
            let { src, type } = e.target.dataset
            let previewInfoEle = document.getElementById('previewInfo')
            if (type === 'img') {
                previewInfoEle.innerHTML = `<img  src="${src}" class="preview-img" />`
                previewModal.show()
            }
            if (type === 'video') {
                previewInfoEle.innerHTML = `<video controls src="${src}" autoplay="true" class="preview-video"></video>`
                previewModal.show()
            }
        }
    }
    function closePreview() {
        previewModal.hide()
        let previewInfoEle = document.getElementById('previewInfo')
        previewInfoEle.innerHTML = ''
    }
    //提交取出对应的视频和图片地址
    function submitPrev() {
        let uploadItemEle = document.getElementsByClassName('upload-item')
        let resultAr = []  //图片和视频列表
        for (let i = 0; i < uploadItemEle.length; i++) {
            resultAr.push(uploadItemEle[i].children[0].getAttribute('data-src'))
        }
        console.log('resultAr', resultAr)
    }
    function uploadFile(type) {
        createFileInput('fileInput', type)

        let fileInput = document.getElementById('fileInput')
        let actionSheet = document.getElementById('actionSheet')
        fileInput.click()
        actionSheet.removeAttribute('class', 'actionsheet-toggle')
        actionSheet.setAttribute('class', 'm-actionsheet')
        document.body.removeChild(document.getElementsByClassName('mask-black')[0])
        fileInput.addEventListener('change', function (e) {
            loadingModal.show();
            let file = e.target.files[0]
            let blobUrl = ''
            var myform = new FormData();
            myform.append('file', file)
            $.ajax({
                url: '/api/evaluation.elist/fileUpload',
                type: "POST",
                data: myform,
                contentType: false,
                processData: false,
                success: function (data) {
                    let res = JSON.parse(data)
                    if (res.code === '0') {
                        if (type === 'img') {
                            // var images = $("[name='images']").val();//图片
                            // if(images){
                            //     images = images + "|" + res.path;
                            //     $("[name='images']").val(images);//图片
                            // }else{
                            //     $("[name='images']").val(res.path)
                            // }
                            createUploadListEle(res.path, type)
                        }
                        if (type === 'video') {
                            // $("[name='videos']").val(res.path)//视频
                            if (type === 'video') {
                                blobUrl = URL.createObjectURL(new Blob(e.target.files));
                                let $video = $('<div><video controls src="' + blobUrl + '" crossOrigin="anonymous" currentTime="1" autoplay="true" muted="true"></video></div><div> </div>');
                                $("#in-box").html($video);
                                let videoElement = $("video")[0];
                                videoElement.addEventListener("canplay", function (_event) {
                                    let canvas = document.createElement("canvas");
                                    canvas.width = videoElement.videoWidth;
                                    canvas.height = videoElement.videoHeight;
                                    canvas.getContext("2d").drawImage(videoElement, 0, 0, canvas.width, canvas.height);
                                    let url = URL.createObjectURL(dataURLtoBlob(canvas.toDataURL("image/png")))
                                    createUploadListEle(url, type, res.path)
                                })
                            }
                        }
                    }
                    setTimeout(() => {
                        loadingModal.hide();
                    }, 500);
                },
                error: function (data) {
                    console.log(data)
                    setTimeout(() => {
                        loadingModal.hide();
                    }, 500);
                }
            })
        })
    }

    /**
     * 创建上传后的展示区域列表
     * coverSrc 封面
     * type 上传类型
     * videoSrc 视频地址
     *
     **/
    function createUploadListEle(coverSrc, type, videoSrc) {
        // 创建上传成功后的文件列表信息
        let uploadInnerEle = document.getElementById('upload-inner')
        let uploadItemEle = document.createElement('div')
        uploadItemEle.setAttribute('class', 'upload-item')
        let uploadImgEle = document.createElement('img')
        uploadImgEle.setAttribute('src', coverSrc)
        uploadImgEle.setAttribute('data-type', type)
        uploadImgEle.onclick = previewUploadInfo
        if (type === 'video') {
            uploadImgEle.setAttribute('data-src', videoSrc)
        }
        if (type === 'img') {
            uploadImgEle.setAttribute('data-src', coverSrc)
        }
        let removeIconEle = document.createElement('span')
        removeIconEle.setAttribute('class', 'close-icon')
        removeIconEle.innerHTML = 'x'
        removeIconEle.onclick = removeOne

        // append追加
        uploadItemEle.appendChild(uploadImgEle)
        uploadItemEle.appendChild(removeIconEle)
        uploadInnerEle.appendChild(uploadItemEle)
    }
    // base64 转换 blob
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
    }

    // 创建fileINput
    function createFileInput(eleId, type) {
        $(`#${eleId}`).remove()
        let upfile = document.createElement('input')
        upfile.setAttribute('id', eleId)
        if (type === 'img') {
            upfile.setAttribute('accept', 'image/png,image/gif,image/jpe')
            // upfile.setAttribute('capture', 'camera')
            upfile.setAttribute('multiple', 'multiple')
        }
        if (type === 'video') {
            upfile.setAttribute('accept', 'video/*')
            // upfile.setAttribute('capture', 'camcorder')
            upfile.setAttribute('multiple', 'multiple')
        }
        upfile.setAttribute('type', 'file')
        upfile.setAttribute('class', 'file-input')
        document.getElementById('fileList').appendChild(upfile)
    }
    // 移除
    function removeOne(e) {
        if (e) {
            $(e.target.parentNode).remove()
        }
    }
</script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }

    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
</script>
